<template>
	<view class="content">
		<view class="list_box1 u-skeleton-fillet">
			<view class="pickup" v-if="orderDelites.status=='0'">
				待接单...
			</view>
			<view class="pickup" v-if="orderDelites.status=='1'">
				待取货...
			</view>
			<view class="pickup" v-if="orderDelites.status=='2'">
				配送中...
			</view>
			<view class="pickup" v-if="orderDelites.status=='3'">
				中转中...
			</view>
			<view class="pickup" v-if="orderDelites.status=='4'">
				已完成
			</view>
			<view class="part2">
				<view class="box_add">
					<view class="add_name">
						<view class="buy">
							<image src="../../../static/image/icon_f.png"></image>
						</view>
						<view class="sh_name" @click="goStart(orderDelites)">
							{{orderDelites.pickUpAddressName}}
							<image
								src="https://pt2.0.xianmxkj.com/file/uploadPath/2023/01/28/daf10b235582c81cae1ed1542ea34cc7.png"
								style="width:33rpx;height: 37rpx;"></image>
						</view>
						<view class="xs_add" @click="coll(orderDelites.shipperPhone)"
							v-if="orderDelites.indentType != 5">
							{{orderDelites.shipper?orderDelites.shipper:''}}-
							{{orderDelites.shipperPhone?orderDelites.shipperPhone:''}}
							<!-- <u-icon name="phone"></u-icon> -->
							<image
								src="https://pt2.0.xianmxkj.com/file/uploadPath/2023/01/28/facf54f8f15002dbe2344f3197ccc455.png"
								style="width: 35rpx;height: 38rpx;"></image>
						</view>
					</view>
				</view>
				<view class="jiantou">
					<image src="../../../static/rider/jiantou.png"></image>
				</view>
				<view class="box_add">
					<view class="add_name">
						<view class="send">
							<image src="../../../static/image/icon_d.png"></image>
						</view>
						<view class="sh_name" @click="goEnd(orderDelites)">
							{{orderDelites.deliveredAddressName}}
							<image
								src="https://pt2.0.xianmxkj.com/file/uploadPath/2023/01/28/daf10b235582c81cae1ed1542ea34cc7.png"
								style="width:33rpx;height: 37rpx;"></image>
						</view>
						<view class="xs_add" @click="coll(orderDelites.receiverPhone)">
							{{orderDelites.receiver?orderDelites.receiver:''}}-
							{{orderDelites.receiverPhone?orderDelites.receiverPhone:''}}
							<image
								src="https://pt2.0.xianmxkj.com/file/uploadPath/2023/01/28/facf54f8f15002dbe2344f3197ccc455.png"
								style="width: 35rpx;height: 38rpx;"></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="tips_box" v-if="orderDelites.pickupCode">
			<view class="tip_content">取货码</view>
			<view class="tips_box_qhm">{{orderDelites.pickupCode}}</view>
		</view>

		<!-- 订单信息 -->
		<view class="order_box u-skeleton-fillet">
			<view class="order_title">订单信息</view>
			<view class="order_list">
				<view class="order_name">订单号码</view>
				<view class="order_numbers" @click="copyOrder(orderDelites.orderNumber)">{{orderDelites.orderNumber}}
					<u-icon name="order"></u-icon>
				</view>
			</view>
			<view class="order_list">
				<view class="order_name">备注</view>
				<view class="order_numbers">{{orderDelites.item || "暂无"}}</view>
			</view>
		</view>

		<view style="height: 150rpx;"></view>
		<!-- 接单按钮 -->
		<view class="tabbar_btn">
			<view class="btn_right" @click="jiedan()" v-if="orderDelites.status=='0'">
				接单
			</view>
			<view class="btn_right" @click="querenSh()" v-if="orderDelites.status=='1'">
				确认出库
			</view>
			<!-- <view class="btn_left" @click="zhuanOrder(orderDelites.indentId)" v-if="orderDelites.status=='3'">
				转单
			</view> -->
			<view class="btn_left" v-if="orderDelites.status == 2" @click.stop="ifZhuan(orderDelites.id)">
				{{ifZhuans(orderDelites)?'完成':'转单'}}
			</view>
			<view class="btn_left" v-if="orderDelites.status=='4'" @click="coll(orderDelites.deliveryUserPhone)">
				联系TA</view>
		</view>



		

		<!-- 收货码弹框 -->
		<u-popup v-model="show" mode="center" border-radius="18" width="580rpx" height="400rpx">
			<view class="receipt_code">
				<view class="code_title">
					{{orderDelites.indentType == 5?'填写确认码':'填写收货码'}}
				</view>
				<u-input v-model="shouhuoma" :type="type" :placeholder="orderDelites.indentType == 5?'请输入确认码':'请输入收货码'"
					:border="border" />
				<view class="sure" @click="querenSh">确定</view>
			</view>
		</u-popup>
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>

</template>

<script>
	import uqrCode from '@/common/uqrcode.js'
	export default {
		data() {
			return {
				isQHM: '否',
				show: false,
				closeable: true,
				value: '',
				type: 'text',
				border: true,
				indentNumber: '',
				orderDelites: {},
				latitude: '', //骑手起点纬度
				qiJuli: '', //骑手距离
				shouhuoma: '',
				loading: true, // 是否显示骨架屏组件
				longitude: '',
				phone: '',
				areaCode: '',
				dictLsit: [],
			}
		},
		onLoad(options) {
			// console.log(options)
			this.indentNumber = options.orderNumber
			this.areaCode = options.areaCode
			let latitude = this.$queue.getData('latitude');
			let longitude = this.$queue.getData('longitude');


			var that = this
			if (latitude && longitude) {
				this.longitude = longitude
				this.latitude = latitude
				this.taskData()
			} else {
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						// console.log('当前位置的经度：' + res.longitude);
						// console.log('当前位置的纬度：' + res.latitude);
						that.longitude = res.longitude
						that.latitude = res.latitude
						that.taskData()
					},
					fail: function() {
						// console.log('获取地址失败')
						uni.startLocationUpdate({
							type: 'gcj02', //gcj02  wgs84
							isHighAccuracy: true, //开启高精度定位(！！！必需)
							geocode: true,
							success: res => {
								uni.onLocationChange(function(res2) {
									// console.log('实时纬度：' + res2.latitude);
									// console.log('实时经度：' + res2.longitude);
									that.latitude = res2.latitude
									that.longitude = res2.longitude
									that.taskData()

								});
							},
							fail: err => {
								// clearInterval(this.ordertimer)
								console.error('开启小程序接收位置消息失败：', err)
							},
							complete: msg => {
								// clearInterval(this.ordertimer)
								console.log('调用开启小程序接收位置消息 API 完成')
							}
						});
					}
				});
			}


		},
		methods: {

			//判断是否转单
			ifZhuan(id) {

				const data = this.orderDelites
				if (this.ifZhuans(data)) {
					this.wancheng(id)
				} else {
					let wayPoints = data.wayPoints
					let deliteLog = wayPoints.findIndex(it => it.wayPointAreaCode == this.areaCode)
					let pointData = {}
					if (wayPoints.length > 0 && deliteLog < 0) {
						pointData = wayPoints[0]
					} else {
						pointData = wayPoints[deliteLog + 1]
					}
					this.$Request.postT('/app/logisticsOrder/saveZhuanOrder', {
						logisticsOrderId: data.id,
						transferPointId: pointData.pointId
					}).then(res => {
						if (res.code == 0) {
							this.page = 1
							this.taskData()
							uni.showToast({
								title: '转单完成',
								icon: "success",
								duration: 2000,
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none"
							});
						}
					});
				}
			},

			//判断是否转单
			ifZhuans(data) {
				let deliveredAddressName = data.deliveredAddressName
				let receiverExpressCabinetName = data.receiverExpressCabinetName
				if (deliveredAddressName == receiverExpressCabinetName) {
					return true
				} else {
					false
				}
			},


			//完成确认（填写确认码后）
			wancheng(id) {
				uni.showLoading({
					title: '加载中...',
					mask: true // 是否显示遮罩层（防止触摸穿透）
				});
				this.$Request.postT('/app/logisticsOrder/finishOrder', {
					logisticsOrderId: id,
				}).then(res => {
					if (res.code == 0) {
						this.taskData()
						uni.showToast({
							title: '已完成',
							icon: "success"
						});
						this.shows = false
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				});
				uni.hideLoading();
			},


			//出库确认（填写确认码后）
			querenSh() {
				uni.showLoading({
					title: '加载中...',
					mask: true // 是否显示遮罩层（防止触摸穿透）
				});
				this.$Request.postT('/app/logisticsOrder/quOrder', {
					LogisticsOrderId: this.orderDelites.id,
					pickupCode: this.orderDelites.pickupCode
				}).then(res => {
					if (res.code == 0) {

						uni.showToast({
							title: '取货完成',
							icon: "none"
						});

						this.taskData()
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				});

			},


			//接单
			jiedan() {

				uni.showLoading({
					title: '加载中...',
					mask: true // 是否显示遮罩层（防止触摸穿透）
				});


				this.$Request.postT('/app/logisticsOrder/jieLogisticsOrder', {
					LogisticsOrderIds: [this.orderDelites.id]
				}).then(res => {
					if (res.code == 0) {
						this.page = 1

						uni.showToast({
							title: '接单完成',
							icon: "success"
						});
						this.taskData()
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				});
			},


			copyOrder(value) {
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
			},
			onshow() {
				this.show = true
			},
			coll(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			taskData() {
				let userId = this.$queue.getData("userId")
				this.$Request.getT(`/app/logisticsOrder/queryLogisticsOrderDetail`, {
					orderNumber: this.indentNumber,
					riderId: userId,
				}).then(res => {
					if (res.code == 0) {
						console.log(res.data);
						this.orderDelites = res.data
						this.loading = false;
					}
				});

			},
			quhuo(indentNumber) {
				let that = this
				uni.showModal({
					title: '提示',
					content: that.orderDelites.indentType == 5 ? '确认已接到乘客吗' : '确认取到货吗',
					success: function(res) {
						if (res.confirm) {
							that.$Request.postT('/app/indent/riderBuyGoods', {
								indentNumber: indentNumber
							}).then(res => {
								if (res.code == 0) {
									that.taskData()
									uni.showToast({
										title: that.orderDelites.indentType == 5 ? '确认已接到' :
											'确认取货成功',
										icon: "none"
									});
								} else {
									uni.showToast({
										title: res.msg,
										icon: "none"
									});
								}
							});
						}
					}
				})

			},

			goStart() {

				let name = this.orderDelites.pickUpAddressName;
				let lat = this.orderDelites.pickUpLat;
				let long = this.orderDelites.pickUpLng;
				this.$queue.goOpenLocation(lat, long, name);
			},
			goEnd() {

				let name = this.orderDelites.deliveredAddressName;
				let lat = this.orderDelites.deliveredLat;
				let long = this.orderDelites.deliveredLng;
				this.$queue.goOpenLocation(lat, long, name);
			},
			navgate(e) {
				// console.log(e)
				let plugin = requirePlugin('routePlan');
				let key = this.$queue.getData('mapKey'); //使用在腾讯位置服务申请的key
				let referer = this.$queue.getData('mapName'); //调用插件的app的名称

				let endPoint = JSON.stringify({ //终点
					'name': e.name,
					'latitude': e.lat,
					'longitude': e.long
				});
				wx.navigateTo({
					url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
				});
			},
			shouhuo(e) {
				// console.log(e)
				this.indentNumber = e.indentNumber
				if (e.itemCodeFlag == 0) {
					this.show = true

				} else {
					this.querenSh()
				}

			},

			//生成二维码
			async generateQR(e) {
				// console.log(JSON.stringify(e).slice(0, 200));
				await uqrCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: JSON.stringify(e).slice(0, 200), // 想生成二维码到内容
					size: 200,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uqrCode.errorCorrectLevel.H,
					success: res => {
						console.log('images111111111', res);
					}
				})
			}
		}
	}
</script>

<style>
	body {
		background: #F5F5F5;
	}

	.content {
		width: 100%;
		margin-bottom: 159rpx;
	}

	.part_one {
		width: 90%;
		margin: 0 auto;
		height: 120rpx;
		background: #ffffff;
		margin-top: 20rpx;
		border-radius: 23rpx;
		padding-top: 10rpx;
	}

	.pickup {
		width: 90%;
		margin: 0 auto;
		font-size: 29rpx;
		font-weight: bold;
		letter-spacing: 2rpx;
		line-height: 60rpx;
	}

	.pickup_tit {
		color: #999999;
		font-size: 22rpx;
		width: 90%;
		margin: 0 auto;
	}

	.list_box1 {

		width: 90%;
		margin: 0 auto;
		/* height: 320rpx; */
		background: #FFFFFF;
		border-radius: 23rpx;
		box-shadow: 0rpx 5rpx 5rpx 0rpx rgba(198, 186, 181, 0.20);
		margin-top: 20rpx;
	}

	.part2 {
		width: 90%;
		margin: 0 auto;
		padding: 25rpx 0;
	}

	.box_add {
		display: flex;
	}

	.distance {
		flex: 1;
		text-align: center;
		font-size: 28rpx;
	}

	.a {
		font-size: 16rpx;
	}

	.add_name {
		flex: 8;
		position: relative;
	}

	.buy {
		position: absolute;
		top: 6rpx;
	}

	.buy image {
		width: 30rpx;
		height: 30rpx;
	}

	.send {
		position: absolute;
		top: 6rpx;
	}

	.send image {
		width: 30rpx;
		height: 30rpx;
	}

	.sh_name {
		font-size: 28rpx;
		font-weight: bold;
		letter-spacing: 2rpx;
		text-indent: 38rpx;
		display: flex;
		align-items: center;
	}

	.xs_add {
		color: #999999;
		font-size: 21rpx;
		margin-top: 10rpx;
		display: flex;
		align-items: center;
	}

	.jiantou {
		margin-left: 23rpx;
	}

	.jiantou image {
		width: 20rpx;
		height: 40rpx;
	}

	.part3 {
		width: 90%;
		margin: 0 auto;
		display: flex;
	}

	.three_left {
		flex: 1;
		height: 100rpx;
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.three_left image {
		width: 36rpx;
		height: 37rpx;
	}

	.box_two1 {
		background: #c4e2ff;
		color: #359CFF;
		/* width: 60px; */
		padding: 2rpx 14rpx;
		height: 45rpx;
		font-size: 22rpx;
		/* text-align: center; */
		line-height: 45rpx;
		border-radius: 5rpx;
		/* margin-top: 20rpx; */
		margin-left: 10rpx;
	}

	.three_left text {
		color: #333333;
		font-size: 25rpx;
		margin-left: 10rpx;
	}

	.three_right {
		flex: 1;
		height: 100rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		color: #FF412D;
		font-size: 32rpx;
		font-weight: bold;
	}

	.tips_box {
		width: 90%;
		margin: 0 auto;
		background: #FFFFFF;
		margin-top: 20rpx;
		padding: 30rpx;
		border-radius: 22rpx;
		text-align: center;
	}

	.tips_box_qhm {
		color: #333333;
		font-size: 50rpx;
		font-weight: bold;
		height: 200rpx;
		line-height: 200rpx;
	}

	/* tip */
	.tip_box {
		width: 90%;
		margin: 0 auto;
		height: 180rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
		border-radius: 22rpx;
	}

	.tip_part1 {
		display: flex;
		align-items: center;
	}

	.tip_title {
		/* flex: 1; */
		height: 80rpx;
		display: flex;
		justify-content: left;
		align-items: center;
		font-size: 26rpx;
		font-weight: bold;
		margin-left: 30rpx;
	}

	.tip_rider {
		flex: 1;
		font-size: 20rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-left: 30rpx;
	}

	.tip_rider text {
		font-size: 30rpx;
	}

	.tip_content {
		width: 90%;
		margin: 0 auto;
		font-size: 27rpx;
		font-weight: bold;
		letter-spacing: 2rpx;
		margin-top: 15rpx;
	}

	.u-line {
		border-bottom-width: 3px !important;
	}

	/* 订单信息 */
	.order_box {
		width: 90%;
		margin: 0 auto;
		/* height: 300rpx; */
		background: #ffffff;
		margin-top: 20rpx;
		border-radius: 22rpx;
	}

	.order_title {
		width: 90%;
		margin: 0 auto;
		font-size: 26rpx;
		font-weight: 600;
		line-height: 67rpx;
		letter-spacing: 3rpx;
	}

	.order_list {
		display: flex;
	}

	.order_name {
		flex: 1;
		margin-left: 35rpx;
		color: #999999;
		font-size: 25rpx;
		height: 75rpx;
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.order_numbers {
		flex: 1;
		color: #333333;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 22rpx;
		margin-right: 35rpx;
	}

	/* 费用明细 */
	.income_name {
		flex: 1;
		margin-left: 35rpx;
		color: #999999;
		font-size: 25rpx;
		height: 75rpx;
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.income_numbers {
		flex: 1;
		color: #333333;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 24rpx;
		margin-right: 35rpx;
	}

	.income_numbers1 {
		flex: 1;
		color: #FF2400;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 24rpx;
		margin-right: 35rpx;
	}

	/* 接单按钮 */
	.tabbar_btn {
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		right: 0rpx;
		width: 100%;
		height: 120rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btn_left {
		flex: 1;
		height: 80rpx;
		color: white;
		background: #33D442;
		text-align: center;
		line-height: 80rpx;
		border-radius: 16rpx;
		margin-left: 35rpx;
		margin-right: 20rpx;
		font-size: 26rpx;
		letter-spacing: 3rpx;
	}

	.btn_right {
		flex: 1;
		height: 80rpx;
		color: white;
		background: #FF7F00;
		text-align: center;
		line-height: 80rpx;
		border-radius: 16rpx;
		margin-left: 20rpx;
		margin-right: 35rpx;
		font-size: 26rpx;
		letter-spacing: 3rpx;
	}

	/* 收货码弹框 */
	.receipt_code {
		width: 90%;
		margin: 0 auto;
	}

	.code_title {
		width: 100%;
		line-height: 100rpx;
		font-size: 31rpx;
		font-weight: bold;
		text-align: center;
		letter-spacing: 2rpx;
		margin-top: 21rpx;
		margin-bottom: 25rpx;
	}

	.u-input--border {
		border: 1px solid #F2F2F2 !important;
		background: #F2F2F2 !important;
		color: #999999 !important;
		font-weight: 500 !important;
		letter-spacing: 2rpx !important;
	}

	.u-input__input {
		font-size: 30rpx;
		font-weight: bold;
		flex: 1;
		color: #999999 !important;
		min-height: 85rpx !important;
		margin-top: 7rpx;
	}

	.sure {
		width: 100%;
		height: 80rpx;
		background: #FF7F00;
		color: white;
		border-radius: 46rpx;
		text-align: center;
		line-height: 80rpx;
		margin-top: 30rpx;
		letter-spacing: 2rpx;
	}
</style>